import React, { useEffect, useRef, useState } from 'react';
import { connect, history } from 'umi';
import { Alert, Button, Space, Tag, Modal, notification, Row, Col, Checkbox, Form ,Card} from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import RoleSetForm from './components/CancelOrder';
import PopImgShow from '@/components/PopImgShow';
import SearchCondition from '@/components/SearchCondition';
import { commission_percent ,promoter_typeInfo,promoter_commission_typeInfo,cashWith_status} from '@/common/contact'
const PromoterList = (props) => {
    const { loading, dispatch, list, zm } = props;
    const { location } = history
    const { query } = location
    const { accessId ,id} = query
    const childRef = useRef();
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const [params, setSearchParams] = useState({})
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
                rowKeyList: selectedRows
            });
        },

    });

    useEffect(() => { handleCallback() }, [params])

    // 搜索参数
    const searchItems = [
        {
            label: '推广员',
            name: 'promoterKeyword',
        },
        {
            label: '提现时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
    ];

    const getColumns = [
        {
            title: '推广员名称',
            dataIndex: 'promoterName',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return cashWith_status[e]
            }
        },
        {
            title: '审核时间',
            dataIndex: 'checkTime',
        },
        {
            title: '审核备注',
            dataIndex: 'checkRemark',
        },
       
        {
            title: '申请佣金',
            dataIndex: 'applyCommission',
        },
        {
            title: '实际佣金',
            dataIndex: 'realCommission',
        },
        {
            title: '佣金类型',

            dataIndex: 'commissionType',
            render: (e) => {
                return promoter_commission_typeInfo[e]
            }
        },
        {
            title: '打款时间',

            dataIndex: 'payedTime',
        },
        {
            title: '提现时间',

            dataIndex: 'createTime',
        },
        {
            title: '审核员工',

            dataIndex: 'checkAdminName',
        },
        {
            title: '打款员工',
            dataIndex: 'payedAdminName',
        },
        {
            title: '银行卡号',
            dataIndex: 'bankCard',

        },
        {
            title: '银行名称',
            dataIndex: 'bankName',

        },
        {
            title: '银行户名',
            dataIndex: 'bankAccount',

        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    title: '审核',
                    click: () => {
                        setVisible({
                            show: true,
                            selectIdList: [val],
                        })
                    },
                },
            ],
        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleSaveRole = (detail = {}) => {
        setVisible({
            show: true,
            detail,
        });
    };
    return (
        <Card title='提现复核'>
             <div >
            <Row gutter={[36, 12]}>
                <Col span={24}>
                    <div style={{ background: '#f5f5f5', padding: 24 }}>
                        <SearchCondition
                            form={form}
                            handleSearch={(e) => {
                                setSearchParams(e);
                            }}
                            searchItems={searchItems}
                        ></SearchCondition>
                    </div>
                </Col>
                <Col span={24}>
                    <Space>
                        <Checkbox checked={selectedRow.selectedRowKeys.length > 0 && selectedRow.selectedRowKeys.length === list.list.length} onChange={(e) => {
                            if (e.target.checked) {
                                setSelectedRow({
                                    ...selectedRow,
                                    selectedRowKeys: list.list.map(item => {
                                        return item.id.toString()
                                    }),
                                    rowKeyList: list.list
                                })
                            } else {
                                setSelectedRow({
                                    ...selectedRow,
                                    selectedRowKeys: [],
                                    rowKeyList: []
                                })
                            }

                        }}>当页全选</Checkbox>
                        <div>已选{selectedRow.selectedRowKeys.length} 条 </div>
                        <Button onClick={() => {
                            if (selectedRow.selectedRowKeys.length === 0) {
                                return notification.warn({
                                    message: '温馨提示',
                                    description: `请先选择要审核的提现`,
                                });
                            } else {
                                setVisible({
                                    show: true,
                                    selectIdList: selectedRow.selectedRowKeys.map(item => { return parseInt(item) }),
                                })
                            }
                        }}>批量审核</Button>


                    </Space>
                </Col>
                <Col span={24}>
                    <TableDataBlock
                        rowSelection={selectedRow}
                        cRef={childRef}
                        loading={loading}
                        params={{ ...params,status:'0'}}
                        firstFetch={false}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="promoter/fetchPromoterWithdraw"
                        {...list}
                    ></TableDataBlock>
                </Col>

            </Row>
            <RoleSetForm
                cleanSelect={() => {
                    setSelectedRow({
                        ...selectedRow,
                        selectedRowKeys: [],

                    })
                }}
                visible={visible}
                onClose={() => setVisible(false)}
                handleCallback={handleCallback}
            ></RoleSetForm>
    

        </div >
        </Card>
       
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterWithdrawList,
    loading: loading.effects['promoter/etchPromoterWithdraw']
}))(PromoterList);
